/*第1页，banner页面*/
.banner {
    background-image: -webkit-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:    -moz-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:      -o-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:     -ms-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:         radial-gradient(#f0f0f0, #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #f0f0f0, endColorstr = #f0f0f0);

}
.banner-desc {
    position: absolute;
    top: 40%;
    left: 0;
    opacity: 0;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.banner-desc .banner-title1{
    color: #3c3c42;
}
.banner-desc .banner-title2{
    color: #3c3c42;
    margin: 15px 0;
}
.banner-desc .banner-text{
    color: #5B5C60;

}
.banner-img {
    position: absolute;
    top: 150px;
    right:0;
    width: 580px;
    height: 750px;
    opacity: 0;
    -webkit-transform: translate(20px,-20px) scale(0.99);
    -moz-transform: translate(20px,-20px) scale(0.99);
    transform: translate(20px,-20px) scale(0.99);
    transition: all 1s ease-in;
}

/*第2页，大灯页面*/
.light {
    background-image: -webkit-radial-gradient(#303233, #1d1d1f);
    background-image:    -moz-radial-gradient(#303233, #1d1d1f);
    background-image:      -o-radial-gradient(#303233, #1d1d1f);
    background-image:     -ms-radial-gradient(#303233, #1d1d1f);
    background-image:         radial-gradient(#303233, #1d1d1f);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #303233, endColorstr = #1d1d1f);

}
.light-desc {
    position: absolute;
    top: 40%;
    left: 0;
    text-align: left;
    opacity: 0;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.light-desc h1, .light-desc h2{
    color: #fff;
}
.light-desc h2{
    margin: 15px 0;
}
.light-desc p{
    color: #aaa9a9;
}
.light-img {
    position: absolute;
    top: 100px;
    right: 0;
    opacity: 0;
    -webkit-transform: translateX(0) translateY(50px);
    -moz-transform: translateX(0) translateY(50px);
    transform: translateX(0) translateY(50px);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

/*第3页，细节页面*/
.details {
    background-image: -webkit-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:    -moz-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:      -o-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:     -ms-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:         radial-gradient(#f0f0f0, #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #f0f0f0, endColorstr = #e4e4e4);

}
.details-img{
    position: absolute;
    bottom: 40px;
    right: 500px;
    opacity: 0;
    -webkit-transform: translateX(-20px) translateY(-20px);
    -moz-transform: translateX(-20px) translateY(-20px);
    transform: translateX(-20px) translateY(-20px);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.details-desc {
    position: absolute;
    top: 40%;
    right: 0;
    opacity: 0;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.details-desc h1, .details-desc h2{
    color: #3c3c42;
}
.details-desc h2{
    margin: 15px 0;
}
.details-desc p{
    color: #5B5C60;
}

/*第4页，车架页面*/
.frame {
    background-image: -webkit-linear-gradient(-43deg, #1d1d1f, #6d6d6d);
    background-image:    -moz-linear-gradient(-43deg, #1d1d1f, #6d6d6d);
    background-image:      -o-linear-gradient(-43deg, #1d1d1f, #6d6d6d);
    background-image:     -ms-linear-gradient(-43deg, #1d1d1f, #6d6d6d);
    background-image:         linear-gradient(-43deg, #1d1d1f, #6d6d6d);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #1d1d1f, endColorstr = #6d6d6d);
}
.frame-desc {
    position: absolute;
    left:0;
    top: 40%;
    opacity: 0;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.frame-desc h1, .frame-desc h2{
    color: #fff;
}
.frame-desc h2{
    margin: 15px 0;
}
.frame-desc p{
    color: #aaa9a9;
}
.frame-img {
    position: absolute;
    bottom : 50px;
    left: 340px;
    opacity: 0;
    -webkit-transform: translate(50px,0);
    -moz-transform: translate(50px,0);
    transform: translate(50px,0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

/*第5页，镀铬部件页面*/
.chrome {
    background:#0e1116;
    z-index: 1;
}
.chrome {
    max-height: 100%;
}
.chrome .chrome_bg1{
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.chrome .chrome_bg2{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    max-height: 100%;

}
.chrome-desc {
    position: absolute;
    right:0;
    top: 40%;
    opacity: 0;
    z-index: 10;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.chrome-desc h1, .chrome-desc h2{
    color: #fff;
}
.chrome-desc h2{
    margin: 15px 0;
}
.chrome-desc p{
    color: #aaa9a9;
}
.chrome-img {
    position: absolute;
    left: 0;
    top: 20%;
    z-index: 4;
    max-height: 100%;
    overflow: hidden;
}
.chrome-img img{

}
/*镀铬光泽效果*/
.mask {
    position: absolute;
    top: 0;
    left: 30px;
    width: 120px;
    height: 400px;
    z-index: 6;
    opacity: 0;
   -webkit-transform: translate(239px,124px);
    -moz-transform: translate(239px,124px);
    -ms-transform: translate(239px,124px);
    transform: translate(239px,124px);
}

/*第6页，骑行页面*/
.cycling {
    background-image: -webkit-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:    -moz-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:      -o-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:     -ms-radial-gradient(#f0f0f0, #e4e4e4);
    background-image:         radial-gradient(#f0f0f0, #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #f0f0f0, endColorstr = #e4e4e4);

}
.cycling-desc {
    position: absolute;
    left: 0;
    top: 35%;
    opacity: 0;
    -webkit-transform: translateY(20px) translateZ(0);
    -moz-transform: translateY(20px) translateZ(0);
    transform: translateY(20px) translateZ(0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.cycling-desc h1, .cycling-desc h2{
    color: #3c3c42;
}
.cycling-desc .cycling-title2{
    margin-top: 30px;
}
.cycling-desc .cycling-text1{
    margin-top: 10px;
}
.cycling-desc p{
    color: #5b5c60;
}
.cycling-img {
    position: absolute;
    top:22%;
    right: 0;
    opacity: 0;
    -webkit-transform: translate(50px,0);
    -moz-transform: translate(50px,0);
    transform: translate(50px,0);
    -webkit-transition:all 1s ease-in;
    -moz-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.triangle-img{
    position: absolute;
    top: 220px;
    right: 177px;
    z-index: 10;
}
.triangle-img .triangle{
    background-image: url("../../images/1/round.png");
    background-repeat: no-repeat;
}
/*次序一*/
.circle2{
    position: relative;
    bottom: 0;
    left: 0;
    background-position: -1px -73px;
    width: 25px;
    height: 25px;
    opacity: 0;
    transition: all 1s ease-in;
}
/*次序二*/
.line1{
    position: relative;
    bottom: -7px;
    left: 23px;
    background-position: -27px -2px;
    width: 113px;
    height: 90px;
    opacity: 0;
    transition:all 1s linear ;
}
/*次序三*/
.circle3{
    position: relative;
    bottom: 185px;
    left: 134px;
    background-position: -1px -73px;
    width: 25px;
    height: 25px;
    opacity: 0;
    transition:all 1s linear ;
}
/*次序四*/
.line2{
    position: relative;
    bottom: 177px;
    left: 4px;
    background-position: -142px -2px;
    width: 130px;
    height: 59px;
    opacity: 0;
    transition:all 1s linear ;
}
/*次序五*/
.circle1{
    position: relative;
    bottom: 49px;
    right: 20px;
    background-position: -1px -73px;
    width: 25px;
    height: 25px;
    opacity: 0;
    transition:all 1s linear ;
}
/*次序六*/
.line3{
    position: relative;
    bottom: 249px;
    right: 12px;
    background-position: -274px -2px;
    width: 26px;
    height: 137px;
    opacity: 0;
    transition:all 1s linear ;
}


/*媒介查询*/
@media screen and (max-width:1200px) {
    .banner-img {
        position: absolute;
        top: 5%;
        right:20%;
        width: auto;
        height: 550px;
        opacity: 0;
        -webkit-transform: translate(20px,-20px) scale(0.99);
        -moz-transform: translate(20px,-20px) scale(0.99);
        transform: translate(20px,-20px) scale(0.99);
        transition: all 1s ease-in;
    }
    .banner-img img{
        height: 550px;
    }
}
@media screen and (max-width:1300px) {
    .banner-img {
        position: absolute;
        top: 5%;
        right:20%;
        width: auto;
        height: 550px;
        opacity: 0;
        -webkit-transform: translate(20px,-20px) scale(0.99);
        -moz-transform: translate(20px,-20px) scale(0.99);
        transform: translate(20px,-20px) scale(0.99);
        transition: all 1s ease-in;
    }
    .banner-img img{
        height: 550px;
    }
}
@media screen and (max-width:1400px) {
    .banner-img {
        position: absolute;
        top:5%;
        right:20%;
        width: auto;
        height: 550px;
        opacity: 0;
        -webkit-transform: translate(20px,-20px) scale(0.99);
        -moz-transform: translate(20px,-20px) scale(0.99);
        transform: translate(20px,-20px) scale(0.99);
        transition: all 1s ease-in;
    }
    .banner-img img{
        height: 550px;
    }
}

